<template>
  <PageWrapper :contentStyle="{ margin: '10px' }">
    <Tabs v-model:activeKey="tabValue" class="tabs" :destroyInactiveTabPane="true">
      <TabPane v-for="(item, index) in navList" :tab="item.label" :key="index">
        <component :is="chatTable" ref="componentRef" :lang="item.lang" />
      </TabPane>
    </Tabs>
  </PageWrapper>
</template>

<script setup lang="ts" name="SiteSettings">
  import { PageWrapper } from '/@/components/Page';
  import { Tabs, TabPane } from 'ant-design-vue';
  import chatTable from './chatTable.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { ref } from 'vue';

  const { t } = useI18n();

  const navList = [
    {
      label: '中文',
      key: 1,
      lang: 'zh_CN',
    },
    {
      label: '英文',
      key: 2,
      lang: 'en_US',
    },
    {
      label: '越南文',
      key: 3,
      lang: 'vi_VN',
    },
    {
      label: '葡萄牙文',
      key: 4,
      lang: 'pt_BR',
    },
    {
      label: '印度文',
      key: 5,
      lang: 'hi_IN',
    },
    {
      label: '泰文',
      key: 6,
      lang: 'th_TH',
    },
  ];

  const tabValue: any = ref(1);
</script>
<style lang="less" scoped>
  .tabs {
    border-radius: 3px;
    background-color: @component-background;
  }

  ::v-deep(.ant-tabs-top > .ant-tabs-nav) {
    margin: 0 0 0 20px !important;
  }
</style>
